<template>
	<view class="home">
		<swiper indicator-dots circular>
			<swiper-item v-for="item in lunBoArr" :key="item.id">
				<image :src="item.img"></image>
			</swiper-item>
		</swiper>
		
		<!-- 导航区域 -->
		<view class="nav">
			<view class="nav-item" v-for="(item,index) in navArr" :key="index" @click="navClick(item.needleNum,item.path)">
				<text>{{item.title}}</text>
			</view>
		</view>
		
		<!-- 选择疫苗品牌 -->
		<uni-popup class="layer" ref="popup" type="center" :maskClick="true" :animation="false">
		   <view id="chose-brand">
				<view class="title">请选择疫苗厂商</view>
			   
			   <text class="desc">同一种类的疫苗可以混接</text>
			   
				<view class="btn" style="background-color:#4CD980;" @click="choseVaccineBrand('中国科兴')">
					中国科兴
				</view>
				
				<view class="btn" style="background-color: #F0AD4E;" @click="choseVaccineBrand('北京生物')">
					北京生物
				</view>
		   </view>
		</uni-popup>
		
		
		<!-- 常用功能区 -->
		<view class="tools">
			<view class="tools-item" v-for="(item,index) in toolsArr" :key="index" @click="itemClick(item.needleNum,item.path)">
				<view :class="item.icon"></view>
				<text>{{item.title}}</text>
			</view>
		</view>
		
		
		<!-- 健康资讯 -->
		<view class="health-info">
			<view class="title">健康资讯</view>
			<view class="more">查看更多</view>
		</view>
		
		<view class="info" v-for="(item,index) in announcementArr" :key="index">
			<view>
				<view class="left">
					<view class="title">{{item.title}}</view>
					<view class="time">{{item.createTime | formatDate}}</view>
					<view class="content">{{item.content}}</view>
				</view>
				<view class="right">疫情防控</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	
	export default {
		data() {
			return {
				lunBoArr:[],
				announcementArr:[],
				navArr:[
					{
						icon: 'iconfont icon-fangdajing',
						title: '第一针',
						needleNum:1,
						path: '/pages/agency/agency?needleNum=1'
					},
					{
						icon: 'iconfont icon-diqiu',
						title: '第二针',
						needleNum:2,
						path: '/pages/agency/agency?needleNum=2'
					},
					{
						icon: 'iconfont icon-diqiu',
						title: '第三针',
						needleNum:3,
						path: '/pages/agency/agency?needleNum=3'
					}
				],
				navUrl:'',
				toolsArr:[
					{
						icon: 'iconfont icon-diqiu',
						title: '港澳台、外籍新冠预约',
						path: '/pages/appointment/appointment'
					},
					{
						icon: 'iconfont icon-dazhen',
						title: '外地来珠海第二针接种申请',
						path: '/pages/appointment/appointment'
					},
					{
						icon: 'iconfont icon-feiji',
						title: '留学出国新冠接种',
						path: '/pages/appointment/appointment'
					},
					{
						icon: 'iconfont icon-dazhen1',
						title: '集体用户新冠预约',
						path: '/pages/appointment/appointment'
					},
					{
						icon: 'iconfont icon-jilu1',
						title: '预约记录',
						path: '/pages/appointment/appointment'
					},
					{
						icon: 'iconfont icon-sousuowenjian',
						title: '新冠疫苗接种记录',
						path: '/pages/appointment/appointment'
					},
					{
						icon: 'iconfont icon-check',
						title: '产检医保签约申请',
						path: '/pages/appointment/appointment'
					},
					{
						icon: 'iconfont icon-yachi',
						title: '窝沟封闭',
						path: '/pages/appointment/appointment'
					}
				]
			}
		},
		onLoad() {
			this.lunBo() ;
		},
		onShow() {
			this.getAnnouncementList() ;
			if(this.$refs.popup) {
				this.$refs.popup.close() ;
			}
		},
		methods: {
			async getAnnouncementList() {
				const res = await this.$request({
					url:'/api/v1/announcement/list',
					data: {
						page:1,
						limit:10
					},
					header:{
						'Authorization': 'Bearer ' + this.$getStorageSync("token") 
					},
					method:'GET'
				}) ;
				
				this.announcementArr = res.data.data ;
			},
			async lunBo() {
				
				this.lunBoArr = [
					{
						id:1,
						url:'http://www.baidu.com',
						img:'../../static/images/p1.jpg'
					},
					{
						id:2,
						url:'http://www.qq.com',
						img:'../../static/images/p2.jpg'
					},
					{
						id:3,
						url:'http://www.ifeng.com',
						img:'../../static/images/p3.jpg'
					}
				] ;
				
			},
			
			itemClick(url) {
				uni.navigateTo({
					url
				})
			},
			navClick(needleNum,url) {
				this.navUrl = url ;
				
				if(needleNum!=1 ) {
					this.$refs.popup.open('center') ;
					return ;
				} 
				this.itemClick(this.navUrl) ;
			},
			choseVaccineBrand(brand) {
				this.itemClick(this.navUrl+ "&vaccineBrand="+brand) ;
			}
		},
		components: {
			uniPopup
		}
	}
</script>

<style lang="scss">
	.home {
		background-color: #F0F0F0;
		swiper {
			width: 96%;
			height: 380rpx;
			text-align: center;
			margin: 0 auto 10rpx ;
			image {
				height: 100%;
				width:100%;
			}
		}
		
		.nav {
			display: flex;
			
			.nav-item {
				width:30%;
				height: 120rpx;
				line-height: 120rpx;
				text-align: center;
				background-color: #CCFFFF;
				margin: 10rpx auto;
				border-radius: 10rpx;
				font-size: 30rpx;
				color: #CC3333;
			}
		}
		
		.tools {
			width: 96%;
			height: 480rpx;
			background-color: #CCFFCC;
			margin:  auto;
			border-radius: 10rpx;
			text-align: center;
			display: flex;
			flex-wrap: wrap;
			
			.tools-item {
				width: 25%;
				text-align: center;
	
				
				view {
					width:100rpx;
					height: 100rpx;
					line-height: 120rpx;
					font-size: 80rpx;
					margin: 10px auto;
				}
				
				text {
					font-size: 16rpx;
					display: block;
					width: 120rpx;
					margin: auto;
				}
			}
		}
		
		.health-info {
			height: 50rpx;
			line-height: 50rpx;
			margin: 10rpx auto;
			width:96%;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
			
			.title {
				float: left;
				margin-left: 10rpx;
				font-size: 36rpx;
				font-weight: bold;
			}
			
			.more {
				float: right;
				margin-right: 10rpx;
				font-size: 16rpx;
			}
		}
		
		.info {
			width:96%;
			background-color: #FFF;
			color: #4F4F4F;
			margin: 10rpx auto;
			padding: 30rpx;
			position: relative;
			
			.left {
				width:60%;
	
				
				.title {
					font-size: 32rpx;
					color:#000000;
					font-weight: bold;
				}
				.time {
					font-size: 24rpx;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
				}
				.content {
					font-size:26rpx;
				}
			}
			
			.right {
				width:190rpx ;
				height: 190rpx;
				background-color: #FFD306;
				color: #000000;
				font-size:70rpx;
				text-align: center ;
				line-height: 100rpx;
				padding: 10rpx;
				border-radius: 20rpx;
				position: absolute;
				right:50rpx;
				top:20rpx;
			}
		}
	}
	
	
	
	#chose-brand {
		width:600rpx;
		height:500rpx;
		background-color: #FFF;
		
		padding: 15rpx;
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		
		box-sizing: border-box;
	}
	
	.title {
		text-align: center;
		font-size: 40rpx;
		font-weight: bold;
	}
	
	.desc {
		text-align: center;
		margin: 30rpx auto;
	}
	
	
	.btn {
		width:90%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 50rpx;
		
		color: #FFF;
		text-align: center;
		
		margin: 30rpx auto;
	}
	
	
</style>
